<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/contractList' }">劳动合同列表</el-breadcrumb-item>
                <el-breadcrumb-item>{{pageTitle}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="table-form-box">
                <h3 class="h3">人事合同详情</h3>

                <table border="0" width="100%" cellpadding="0" cellspacing="1">
                    <tbody>
                        <tr class="tr-title">
                            <td colspan="6">基本信息</td>
                        </tr>

                        <tr>
                            <td align="right">合同编号:</td>
                            <td>{{formData.contractNo}}</td>
                            <td align="right">员工:</td>
                            <td>{{formData.employeeName}}</td>
                            <td align="right">合同名称:</td>
                            <td>{{formData.contractName}}</td>
                        </tr>
                        <tr>
                            <td align="right">合同类型:</td>
                            <td>{{formData.contractTypeName}}</td>
                            <td align="right">合同状态:</td>
                            <td>{{formData.contractStatusName}}</td>
                            <td align="right">签约时间:</td>
                            <td>{{formData.signTime|formatDate}}</td>
                        </tr>
                        <tr>
                            <td align="right">生效时间:</td>
                            <td>{{formData.validTime|formatDate}}</td>
                            <td align="right">失效时间:</td>
                            <td>{{formData.endTime|formatDate}}</td>
                            <td align="right">试用结束日期:</td>
                            <td>{{formData.tryEndtime|formatDate}}</td>
                        </tr>
                        <tr>
                            <td align="right">试用月数:</td>
                            <td>{{formData.tryMonth}}</td>
                            <td align="right">试用工资:</td>
                            <td>{{formData.tryMoney}}</td>
                            <td align="right">转正工资:</td>
                            <td>{{formData.correctMoney}}</td>
                        </tr>
                        <tr>
                            <td align="right">备注:</td>
                            <td colspan="5">{{formData.remarks}}</td>
                        </tr>
                    </tbody>
                </table>

                <upload-files :files="fileList" @fun="dealFiles" :isShowDel="false" v-if="flag"></upload-files>
            </div>
        </div>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
export default {
    name: 'contractDetail',
    data() {
        return {
            pageTitle: '',
            flag: false,
            editId: '', // 修改的id

            formData: {
                contractName: '', // 合同名称
                contractNo: '', // 合同编号
                contractStatusId: '', // 合同状态id
                contractStatusName: '', //  合同状态name
                contractStatusValue: '', // 合同状态值
                contractTypeId: '', // 字典项 id 合同类型
                contractTypeName: '', // 合同类型名称
                contractTypeValue: '', // 合同类型值
                correctMoney: '', // 转正工资,单位为分
                employeeId: '', // 所属员工id
                employeeName: '', //所属员工名字
                endTime: '', // 结束时间
                remarks: '', // 备注
                remindEmployeeName: '', // 提醒员工名字
                signTime: '', // 签约时间
                tryEndtime: '', // 试用期到期日期
                tryMoney: '', // 试用期工资,单位为分
                tryMonth: '', // 试用月数
                uploadReturns: [
                    // 附件上传详情
                    {
                        fileName: '', // 文件名
                        fileType: '', // 文件类型名称
                        fileUrl: '', // 文件所在地址
                        ownerId: '', // 所关联的表主键id.即是该文件所属的表的主键
                        uploadUserId: '', // 文件上传人员ID
                        uploadUserName: '' //  文件上传人员名字
                    }
                ],
                validTime: '' // 合同生效时间
            },

            // 上传文件,选择的文件
            fileList: [],
            files: []
        };
    },
    components: {},
    methods: {
        dealFiles: {},
        // 如果是修改先获取数据。
        getData() {
            appMain
                .contractFindById({}, this.editId)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.formData = res.data.data;
                        //获取人员档案附件
                        this.uploadFileInfoFindById(res.data.data.contractNo);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //根据id查询附件
        uploadFileInfoFindById(id) {
            appMain
                .uploadFileInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.fileList = res.data.data;
                        this.flag = true;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }
    },
    mounted() {
        this.pageTitle = this.$router.currentRoute.meta.title;
    },
    created() {
        if (this.$route.query.id) {
            this.editId = this.$route.query.id;
            this.getData(); // 获取要修改的数据
        } else {
            this.flag = true;
        }
    },
    filters: {
        //时间过滤器
        formatDate: function(val) {
            let date = new Date(val);
            return appMain.formatDate(date, 'yyyy-MM-dd hh:mm:ss');
        }
    }
};
</script>

<style scoped>
.container {
    padding-bottom: 50px;
}
.table {
    width: 100%;
    font-size: 14px;
}

.table-form-box table {
    background-color: #666;
}
.table-form-box .h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    padding: 20px 0;
}
.table-form-box table .tr-title td {
    font-size: 14px;
    line-height: 40px;
}
.table-form-box table td,
.table-form-box table th {
    background-color: #fff;
    padding: 4px;
    min-height: 40px;
    font-size: 12px;
}
</style>
